<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="Container100 ui-fluid">
            <div class="Card">
                <h1 class="CardBigTopic TexAlCenter">DataTable</h1>
                <div class="SeparatorFull"/>
                <h:form id="form">
                    <p:dataTable id="singleDT"
                                 var="car"
                                 value="#{dtSelectionView.cars1}"
                                 reflow="true"
                                 rows="10"
                                 paginator="true"
                                 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                 currentPageReportTemplate="({currentPage} of {totalPages})"
                                 rowsPerPageTemplate="5,10,15"
                                 selectionMode="single"
                                 selection="#{dtSelectionView.selectedCar}"
                                 rowKey="#{car.id}">

                        <p:ajax event="rowSelect" update=":form:carDetail" oncomplete="PF('carDialog').show()"/>

                        <f:facet name="header">
                            Car Sales Ranks
                        </f:facet>

                        <p:column headerText="Id" footerText="Id" sortBy="#{car.id}">
                            <h:outputText value="#{car.id}" />
                        </p:column>

                        <p:column headerText="Year" footerText="Year" sortBy="#{car.year}">
                            <h:outputText value="#{car.year}" />
                        </p:column>

                        <p:column headerText="Brand" footerText="Brand" sortBy="#{car.brand}">
                            <h:outputText value="#{car.brand}" />
                        </p:column>

                        <p:column headerText="Color" footerText="Color" sortBy="#{car.color}">
                            <h:outputText value="#{car.color}" />
                        </p:column>
                    </p:dataTable>

                    <p:dialog header="Car Info"
                              widgetVar="carDialog"
                              modal="true"
                              showEffect="fade"
                              hideEffect="fade"
                              resizable="false"
                              responsive="true">
                        <p:outputPanel id="carDetail" style="text-align:center;">
                            <p:panelGrid columns="2"
                                         layout="grid"
                                         styleClass="ui-panelgrid-blank"
                                         rendered="#{not empty dtSelectionView.selectedCar}">
                                <f:facet name="header">
                                    <p:graphicImage name="demo/images/car/#{dtSelectionView.selectedCar.brand}-big.gif"/>
                                </f:facet>

                                <h:outputText value="Id:" style="font-weight: bold"/>
                                <h:outputText value="#{dtSelectionView.selectedCar.id}" />

                                <h:outputText value="Year" style="font-weight: bold"/>
                                <h:outputText value="#{dtSelectionView.selectedCar.year}" />

                                <h:outputText value="Color:" style="font-weight: bold"/>
                                <h:outputText value="#{dtSelectionView.selectedCar.color}" style="color:#{dtSelectionView.selectedCar.color}"/>

                                <h:outputText value="Price" style="font-weight: bold"/>
                                <h:outputText value="\$#{dtSelectionView.selectedCar.price}" />
                            </p:panelGrid>
                        </p:outputPanel>
                    </p:dialog>
                </h:form>
            </div>
        </div>
    </ui:define>
</ui:composition>